<template>
  <a-menu
    @click="changePage"
    mode="horizontal"
    theme="dark"
    :selectedKeys="currentPath"
    :style="{ lineHeight: '64px' }"
  >
    <a-menu-item key="adminIndex">
      <a-icon type="pie-chart" />
      <span>后台首页</span>
    </a-menu-item>
    <a-menu-item key="website">
      <a-icon type="global" />
      <span>网站配置</span>
    </a-menu-item>
    <a-menu-item key="adminUsers">
      <a-icon type="user" />
      <span>用户管理</span>
    </a-menu-item>
    <a-sub-menu key="article">
      <span slot="title"><a-icon type="team" /><span>文章管理</span></span>
      <a-menu-item key="articleAdd"> 添加文章</a-menu-item>
      <a-menu-item key="articleList"> 文章列表</a-menu-item>
      <a-menu-item key="articleCategory"> 分类管理</a-menu-item>
      <a-menu-item key="articleComment"> 评论管理</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>

<script>
export default {
  created() {
    this.currentPath = [this.$route.name];
  },
  data() {
    return {
      currentPath: ["adminIndex"],
    };
  },
  methods: {
    // 点击侧边栏执行的方法
    changePage(item) {
      this.currentPath = item.keyPath.reverse();
      this.$router.push({
        name: item.key,
      });
    },
  },
};
</script>

<style></style>
